<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .txt {
        height: 200px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <script>
      let arr = [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
      ]
      let str = '#'
      function getColor(flag = true) {
        if (flag) {
          for (let i = 1; i <= 6; i++) {
            let random = Math.floor(Math.random() * arr.length)
            let index = arr[random]
            str = str + index
          }
          return str
        } else {
          let r = Math.floor(Math.random() * 256)
          let g = Math.floor(Math.random() * 256)
          let b = Math.floor(Math.random() * 256)
          return `rgba(${r},${g},${b})`
        }
      }
      let color1 = getColor(true)
      let color2 = getColor(false)
      document.write(color1+'<br>')
      document.write(color2)
      document.write(`
      <div class="txt" style="background-color:${color1} ;">

</div>
      `)
    </script>
  </body>
</html>
